style: Fix margin and color problems in the close buttons

- align the screenshot close button better
- use color changes consistent with other elements

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2309>

diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 7b6747c8b80200f04b583a9552ed59b4826def6d..f7fa3da2bef8ca241d61675d7ea7517a8e9676d6 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -26,8 +26,10 @@ $screenshot_ui_button_red: $error_color;
 .screenshot-ui-close-button {
   @extend .window-close; // copy window close button
   padding: $base_padding !important; // but with more padding
-  &.left { margin-left: 8px;}
-  &.right { margin-right: 8px;}
+  margin-top: 12px;
+  box-shadow: 0 2px 4px 0 $shadow_color;
+  &.left { margin-left: 12px;}
+  &.right { margin-right: 12px;}
 }
 
 .screenshot-ui-type-button {

diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
index 1d30e0fb76af145cddfacf633ea730195acfba51..c71adad54f5121595bbc0de5774f8fa3ebaa0a4a 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
+++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
@@ -5,7 +5,7 @@ $window_picker_padding: $base_padding * 2; // 12px
 
 $window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
 
-$window_close_button_color: lighten(transparentize($osd_bg_color, .05), 7%);
+$window_close_button_color: transparentize(lighten($osd_bg_color, 7%), .02);
 $window_close_button_size: 30px;
 $window_close_button_padding: 3px;
 
@@ -18,7 +18,7 @@ $window_close_button_padding: 3px;
 // Window titles
 .window-caption {
   color: $osd_fg_color;
-  background-color: $osd_bg_color;
+  background-color: lighten($osd_bg_color, 5%);
   border-radius: 99px;
   padding: $base_padding $base_padding * 2;
 }
@@ -32,17 +32,16 @@ $window_close_button_padding: 3px;
   padding: $window_close_button_padding;
   height: $window_close_button_size;
   width: $window_close_button_size;
-  transition-duration: 300ms;
+  transition-duration: 100ms;
 
   & StIcon { icon-size: 24px; } // uses non standard icon size
 
   &:hover {
-    background-color: mix($osd_fg_color, $window_close_button_color, 15%);
+    background-color: lighten($window_close_button_color, 7%);
   }
 
   &:active {
-    color: transparentize($osd_fg_color, 0.2);
-    background-color: darken($window_close_button_color, 5%);
+    background-color: lighten($window_close_button_color, 13%);
   }
 }